<template>
  <q-page class="flex flex-center">
    <div class="container shadow-2 rounded">
      <screen ref="screen" v-model="screenStr" class="screen"></screen>
      <div class="panel">
        <div
          v-for="item in commands"
          :key="item.label"
          class="item"
          @click="hClickCommand(item)"
        >{{ item.label }}</div>
        <div class="delete-img item" @click="hClickDelete">
          <img src="~src/assets/delete.svg" />
        </div>
        <div class="numbers">
          <div v-for="num in numbers" :key="num" class="item" @click="hClickNum(num)">{{ num }}</div>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script setup>
import { ref, computed } from 'vue';
import Screen from 'src/components/Screen.vue';
const screen = ref(null)  // 模板引用
const screenStr = ref('') //表达式
const numbers = ref(['7', '8', '9', '4', '5', '6', '1', '2', '3', '00', '0', '.'])
// const commands = ref(['C', '%', '÷', 'x', '－', '+', '='])

const commands = ref([
  { label: "C", fn: () => { screenStr.value = ''; screen.value.emptyRes(); } },
  { label: "%", fn: () => { screenStr.value += '%'; screen.value.cal(screenStr.value) } }, 
  { label: " ÷ " },
  { label: " x " },
  { label: " － " },
  { label: " ＋ " },
  {
    label: "＝", fn: () => {
      screen.value.equal()
    }
  }
])
function hClickNum (num) {
  screenStr.value += num;
  screen.value.cal(screenStr.value)
}
function hClickCommand (item) {
  if (item.fn) {
    item.fn()
  } else {
    screenStr.value += item.label
  }
}
/* 修剪末端 不是数字的部分 */
function trim (str) {
  return str.replace(/\D+$/g, "")
  // if (isNaN(parseInt(str[str.length - 1]))) {
  //   return trim(str.slice(0, -1))
  // } else {
  //   return str
  // }
}
function hClickDelete () {
  screenStr.value = screenStr.value.slice(0, -1)
  if (screenStr.value.length < 5) /* 1 + 1 最少需要长度5 */ {
    screen.value.emptyRes(); return;
  }

  if (screenStr.value[screenStr.value.length - 1] == " ") {
    screenStr.value = screenStr.value.slice(0, -1)
  }
  screen.value.cal(trim(screenStr.value)) /* 长度不够返回空字符串 不用担心报错 */

}
</script>
<style lang="scss">
.container {
  // border: 1px solid black;
  height: 100%;
  text-align: center;
  /* 容器的大小 */
  @media screen and (max-width: $breakpoint-xs-max) {
    width: 100%;
  }
  @media screen and (max-width: $breakpoint-sm-max) {
    width: 80%;
  }
  @media screen and (max-width: $breakpoint-md-max) {
    width: 600px;
  }
  .screen {
    width: 100%;
    background-color: $secondary;
    color: $text1;
    text-align: right;
    --line-h: 2.4em;
    height: calc(2 * var(--line-h));
    line-height: var(--line-h);
    padding: 6px;
    padding-right: 0.8em;
    font-size: 2em;
  }
  .panel {
    width: 100%;
    --line-h: 2.4em;
    padding: 1.2em;
    padding-top: 2em;
    font-size: 1.6em;
    cursor: pointer;
    user-select: none;
    color: $text2;
    background-color: rgba($color: $dark, $alpha: 0.6);

    .item:hover {
      color: red;
    }

    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(5, var(--line-h));

    .numbers {
      color: $text3;

      grid-column: 1/4;
      grid-row: 2/6;

      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: repeat(4, var(--line-h));
    }
    .delete-img {
      grid-area: 1/3/2/4;
      justify-self: center;
    }
  }
}
</style>
